<template>
  <div class="app-container">
    <div class="register_box">
      <div class="register_title">创建您的帐户</div>
      <client-only>
        <el-form
          :model="joinInfo"
          :rules="registerRules"
          ref="registerForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="userName" class="inp_text">
            <p class="inp_title">账号名称</p>
            <el-input
              type="text"
              v-model="joinInfo.userName"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" class="inp_text">
            <p class="inp_title">密码</p>
            <el-input
              type="password"
              v-model="joinInfo.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item class="inp_text" prop="chackPassword">
            <p class="inp_title">确认密码</p>
            <el-input
              type="password"
              v-model="joinInfo.chackPassword"
              placeholder="请再输入一次密码"
            ></el-input>
          </el-form-item>
          <el-form-item class="inp_text">
            <p class="inp_title">验证码</p>
            <el-input
              class="inp_veri_text"
              type="text"
              placeholder="请输入验证码"
              v-model="joinInfo.authCode"
              maxlength="4"
            ></el-input>
            <input
              class="el-input__inner"
              type="text"
              style="width: 100px; letter-spacing: 10px"
              disabled
              v-model="authCode"
            />
            <a href="#" @click.prevent="changeAuthCode">{{ authCodeText }}</a>
          </el-form-item>
          <el-form-item>
            <button class="onSubmit" @click.prevent="onSubmit">提交</button>
          </el-form-item>
        </el-form>
      </client-only>
    </div>
  </div>
</template>
<script>
import registerApi from "/api/register";
export default {
  data() {
    // 用户名校验
    var userName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else if (value.length < 3 || value.length > 8) {
        return callback(new Error("用户名长度必须是3到8位"));
      }
      callback();
    };
    // 密码校验
    var password = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else if (value.length < 6) {
        return callback(new Error("密码长度不得小于6位"));
      }
      callback();
    };
    // 密码二次校验
    var password2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.joinInfo.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      joinInfo: {
        // 用户名
        userName: "",
        // 密码
        password: "",
        // 确认密码
        chackPassword: "",
        // 验证码
        authCode: "",
      },
      // 验证码
      authCode: "",
      // 换一张
      authCodeText: "换一个",
      // 倒计时
      second: 60,
      // 格式校验
      registerRules: {
        userName: [{ validator: userName, trigger: "blur" }],
        password: [{ validator: password, trigger: "blur" }],
        chackPassword: [{ validator: password2, trigger: "blur" }],
      },
    };
  },
  created() {
    this.initAuthCode();
  },
  methods: {
    // 注册提交
    onSubmit() {
      this.$refs["registerForm"].validate((valid) => {
        if (valid) {
          // 判断验证码是否正确
          if (this.joinInfo.authCode === this.authCode) {
            let newUser = {
              userName: this.joinInfo.userName,
              password: this.joinInfo.password,
            };
            // 调用api发起请求
            registerApi.register(newUser).then((res) => {
              this.$message.success("注册成功");
              // 跳转至登陆页面
              this.$router.push("/login");
            });
          } else {
            // 清空输入框
            this.joinInfo.authCode = "";
            this.$message.error("验证码错误，请重新输入");
          }
        } else {
          // 格式校验失败
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 生成随机验证码
    initAuthCode() {
      // 字符
      let strs = [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
      ];
      // 存储字符
      let authCode = "";
      // 生成四个字符
      for (let i = 0; i < 4; i++) {
        // 生成随机数
        let num = Math.floor(Math.random() * strs.length);
        authCode += strs[num];
      }
      // console.log(authCode);
      this.authCode = authCode;
    },
    // 换一个验证码
    changeAuthCode() {
      if (this.authCodeText == "换一个") {
        this.authCodeText = `${this.second}秒后重新获取`;
        // 重新获取验证码
        this.initAuthCode();
        // 倒计时
        let countDown = setInterval(() => {
          this.second--;
          this.authCodeText = `${this.second}秒后重新获取`;
          if (this.second <= 0) {
            this.authCodeText = `换一个`;
            this.second = 3;
            clearInterval(countDown);
          }
        }, 1000);
      }
    },
  },
};
</script>
<style scoped>
.app-container {
  background: url("https://www.xclove.xyz/gameMallImg/login_bg.jpg") no-repeat;
  background-size: cover;
}
.app-container .register_box {
  width: 900px;
  padding: 100px 0;
  margin: 0 auto;
}
.app-container .register_box .register_title {
  font-size: 34px;
  color: #fff;
}
.app-container .register_box form {
  margin-top: 40px;
}
.app-container .register_box .inp_title {
  font-size: 14px;
  margin-bottom: 8px;
  color: #b8b6b4;
}
::v-deep .inp_veri_text {
  width: 130px;
}
::v-deep .inp_veri_text .el-input__inner {
  width: 120px !important;
}
::v-deep .inp_text .el-input__inner {
  width: 300px;
  padding: 10px 6px;
  color: #e9e9e9;
  border-radius: 3px;
  background-color: #32353c;
  border: 1px solid #26282d;
}
.app-container .register_box .onSubmit {
  padding: 8px 50px;
  display: block;
  color: #c3e1f8;
  font-size: 14px;
  background: linear-gradient(90deg, #3da3f1, #2460d0);
  border: none;
  border-radius: 2px;
}
.app-container .register_box .onSubmit:hover {
  background: linear-gradient(90deg, #5dc6ff, #4396ed);
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
</style>